import React from 'react';

import { Form, Input, InputNumber, Button } from 'antd';
import {getUserInfo} from '../../../utils/api'
class AddUser extends React.Component {
    go = () => {
        this.props.history.push('/org/userlist')
    }
    state = {
        layout: {
            labelCol: {
                span: 8,
            },
            wrapperCol: {
                span: 16,
            },
        },
        validateMessages: {
            required: '${label} is required!',
            types: {
                email: '${label} is not validate email!',
                number: '${label} is not a validate number!',
            },
            number: {
                range: '${label} must be between ${min} and ${max}',
            },
        },
        user:{
            name:'',
            email:'',
            age:''
        }
    }
    componentDidMount(){
        console.log(this)
        let ary = this.props.location.search.match(/id=(\w+)/);
        let id = ary &&ary [1];
        if(id){
            // 需要去后台要数据 
            getUserInfo(id).then(data=>{
                console.log(data)
                this.setState({
                    user:{
                        name:data.data.name,
                        email:data.data.email,
                        age:100
                    }
                })
                this.form.setFieldsValue({
                    user:{
                        name:data.data.name,
                        email:data.data.email,
                        age:100
                    }
                })
            })
        }
    }
    onFinish = (value)=>{
        console.log(value)
    }
    render() {
        let { layout, validateMessages } = this.state
        console.log(this.state.user)
        return <div className=''>
            <Form 
                {...layout} 
                ref={(el)=>this.form=el}
                name="nest-messages" 
                onFinish={this.onFinish} 
                initialValues = {{
                    user:this.state.user
                }}
                validateMessages={validateMessages}>
                <Form.Item
                    name={['user', 'name']}
                    label="Name"
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    name={['user', 'email']}
                    label="Email"
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    name={['user', 'age']}
                    label="Age"
                    rules={[
                        {
                            type: 'number',
                            min: 0,
                            max: 999,
                        },
                    ]}
                >
                    <InputNumber />
                </Form.Item>
                
                <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
                    <Button type="primary" htmlType="submit">
                        Submit
        </Button>
                </Form.Item>
            </Form>
        </div>;
    }
}
export default AddUser

